<template>
  <!-- 方案规划导航栏 -->
   <div style="width: 100%;height: 100%;text-align: center;">

 
  <div style="display: inline-flex;width: 100%;height: 10%;margin-top: 1vh;text-align: center;">
    
    <div class="box">
 
      <div style="width: 100%;height: 30%;margin-top: 1.3vh;">
                
        <el-form ref="form" style="text-align: left;" inline="true" label-position="right" :model="form" label-width="120px">
           
          <el-form-item  style="" label="运输起点：">
        
            <el-select v-model="form.startingProvince" placeholder="请选择省" @change="changeStartProvince" style="width:120px">
              <el-option
                v-for="item in startProvinceList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>

                  
            <el-select v-model="form.startingCity" placeholder="请选择市" @change="changeStartCity" style="width:120px">
              <el-option
                v-for="item in startCityOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>

            <el-link @click="onSearch" style="color: #409EFF;">定位</el-link>

          </el-form-item>
          
          
          <el-form-item label="运输终点：">
            
            <el-select v-model="form.endingProvince" placeholder="请选择省" @change="changeEndProvince" style="width:120px">
              <el-option
                v-for="item in endProvinceList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>

                  
            <el-select v-model="form.endingCity" placeholder="请选择市" @change="changeEndCity" style="width:120px">
              <el-option
                v-for="item in endCityOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>

            <el-link @click="pathPlanning" style="color: #409EFF;">定位</el-link>

          </el-form-item>

        </el-form>

      </div>

    </div>
         
 

  </div>

  <div style="width: 98%;height: 50%;text-align: center;position: absolute;">
    
      
    <div class="mapDiv" id="container"></div>
    <div style="display: none;" id="panel"></div>

  </div>

  <div class="box1">
    <el-form ref="form" style="text-align: left;float: left;margin-top: 1.3vh;" :inline="true" class="demo-form-inline" label-position="right" :model="form" label-width="120px">
      <el-form-item label="路线选择：">
        <el-radio-group @change="drivingPolicyChange" style="margin-top: 1vh;" v-model="form.drivingPolicyValue">
          <el-radio label="1">路线一</el-radio>
          <el-radio label="2">路线二</el-radio>
          <el-radio label="3">路线三</el-radio>
        </el-radio-group>
      </el-form-item>
   
      <el-form-item label="计算运输距离：">
        <el-input readonly="true" style="width: 100%;"  v-model="form.transportatDistance"> 
          <template slot="append">km</template>
        </el-input>
      </el-form-item>
          
      <el-form-item label="其中高速里程：">
        <el-input readonly="true" style="width: 100%;"  v-model="form.highwayMileage"> 
          <template slot="append">km</template>
        </el-input>
      </el-form-item>
       

    </el-form>

  </div>
  
  <div style="width: 100%;height: 8%;text-align: center;margin-top: 57vh;">

    <el-button type="primary" @click="savePageData()" style="width: 110px">
        <span class="button-text">保存</span>
    </el-button>
    
  </div>
 


</div>
  
</template>

<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: 'b6a7ea952a94b534734e60f1c322c5d8',
    }
</script>

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=3c40b24a0968cfbc241dce18366a6553&plugin=AMap.Driving"></script>


<script>
import AMapLoader from "@amap/amap-jsapi-loader";

import jsonData from '../../assets/js/china_address.json'

let echarts = require('echarts/lib/echarts');

 

  export default {
    name: 'transportationRoute',
    data() {
      return {
        form: {
          id:"",
          projectId : "",
          drivingPolicyValue:"1", 
          transportatDistance: '', 
          highwayMileage: '', 
          startingPoint: '', 
          endingPoint: '', 
          startingProvince : "",
          startingCity : "",
          endingProvince : "",
          endingCity : ""
        },
        projectId : "",
        activeDate: '',
        type: '',
        startProvinceList: [], // 省列表
        endProvinceList: [], // 省列表

        startCityList: [], // 市列表
        endCityList: [], // 市列表

        originList: [], // 区列表
        startingProvince: '', // 所选的省
        startingCity: '', // 所选的市
        endingProvince: '', // 所选的省
        endingCity: '', // 所选的市
        valueOrigin: '', // 所选的区
        startCityOptions: [], // 市下拉框数据
        endCityOptions: [], // 市下拉框数据
        originOptions: [],// 区下拉框数据
        lat:"",
        lng:"", 
        map:{},
        startMarker:"",
        endMarker : "",
        driving : "",
        isStartClick : "0",
      }
    },
    created() {
      
    },
     
    mounted: function() { 
      //获取项目id
      this.projectId = this.$route.query.projectId;
      
      this.form.projectId = this.projectId;
      this._getJsonData();
      this.queryPageData();

    },
    methods: {
 
      queryPageData : function(){

        var vm = this;

        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/queryPageData?projectId='+this.projectId+"&tableName=ht_transportation_route").then((res) => {
          var result = res.data.data;
          if(result){
            vm.form = result;

            vm.startingPoint = vm.form.startingPoint;
            vm.endingPoint = vm.form.endingPoint;
            

            vm.startingProvince = vm.form.startingProvince;
            vm.startingCity = vm.form.startingCity;

            
            vm.endingProvince = vm.form.endingProvince;
            vm.endingCity = vm.form.endingCity;


            vm.changeStartProvince(vm.startingProvince);
            vm.changeStartCity(vm.startingCity);

            vm.changeEndProvince(vm.endingProvince);
            vm.changeEndCity(vm.endingCity);

            setTimeout(function(){
              vm.changeEndCity(vm.startingCity);
              vm.changeEndCity(vm.endingCity);
            },1000);
          


            var startSplit = vm.startingPoint.split(",");
            var endSplit = vm.endingPoint.split(",");

            window._AMapSecurityConfig = {
              securityJsCode: 'b6a7ea952a94b534734e60f1c322c5d8',
            } 

            AMapLoader.load({
                key: "3c40b24a0968cfbc241dce18366a6553", // 申请好的Web端开发者Key，首次调用 load 时必填
                
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                resizeEnable: true,
                plugins: [
                    "AMap.ToolBar", //工具条
                    "AMap.Scale", // 比例尺
                    "AMap.Geolocation", //定位
                    "AMap.Geocoder",//经纬度进行逆地理编码查询
                    "AMap.Driving",//驾车导航
                ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {

                 //基本地图加载
                  var map = new AMap.Map("container", {
                      resizeEnable: true,
                      center: startSplit,//地图中心点
                      zoom: 13 //地图显示的缩放级别
                  });
                  vm.map = map;

                  // 绑定地图事件
                  map.on("click", vm.handleMapClick);
                  map.on("dblclick", vm.handleMapDblClick); 

                  //构造路线导航类
                  var driving = new AMap.Driving({
                      policy: AMap.DrivingPolicy.LEAST_DISTANCE,
                      map: map,
                      showTraffic:false,
                      autoFitView:true,
                      extensions:"all",
                      panel: "panel"
                  }); 
                  this.driving = driving;
                  // 根据起终点经纬度规划驾车导航路线
                  driving.search(new AMap.LngLat(startSplit[0], startSplit[1]), new AMap.LngLat(endSplit[0], endSplit[1]), function(status, result) {
                  
                       
                    // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                      if (status === 'complete') {
                         
                          
                          var routes = result.routes; // 获取路线信息
                          if (routes && routes.length > 0) {
                              var distance = routes[0].distance; // 获取第一条路线的总距离，单位为米
                              var resultValue =  (distance / 1000).toFixed(2);
                              vm.form.transportatDistance = resultValue;
                              
                              var steps = routes[0].steps;

                              if(steps){

                                var totalDistance = 0;

                                for(var i = 0;i<steps.length;i++){

                                  var step = steps[i];
                                  var distance2 = step.distance;

                                  var toll_road = step.toll_road;

                                  if(toll_road.includes("高速")){
                                    totalDistance = totalDistance+distance2;
                                  }

                                }

                                if(totalDistance!=0){
                                  var resultValue =  (totalDistance / 1000).toFixed(2);
                                  
                                  vm.form.highwayMileage = resultValue; 
                                }

                              }

                          } 

                      } else {
                          
                      }
                  });

                  
            }).catch(e => {
                console.log(e);
            })

          }else{
            
            window._AMapSecurityConfig = {
              securityJsCode: 'b6a7ea952a94b534734e60f1c322c5d8',
            } 

            AMapLoader.load({
                key: "3c40b24a0968cfbc241dce18366a6553", // 申请好的Web端开发者Key，首次调用 load 时必填
                
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                resizeEnable: true,
                plugins: [
                    "AMap.ToolBar", //工具条
                    "AMap.Scale", // 比例尺
                    "AMap.Geolocation", //定位
                    "AMap.ToolBar", //工具条
                    "AMap.Scale", // 比例尺
                    "AMap.Geolocation", //定位
                    "AMap.Geocoder",//经纬度进行逆地理编码查询
                    "AMap.Driving",//驾车导航
                ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                console.log(AMap);
                this.map = new AMap.Map("container", { //设置地图容器id
                    resizeEnable: true,
                    rotateEnable: true,
                    pitchEnable: true,
                    zoom: 6.5,
                    pitch: 80,
                    rotation: -15,
                    viewMode: '2D',//开启3D视图,默认为关闭
                    buildingAnimation: true,//楼块出现是否带动画
                    expandZoomRange: true,
                    zooms: [3, 20],
                    center: [117.120128,36.652069], //初始化地图中心点位置
                });
                  
            }).catch(e => {
                console.log(e);
            })

          }
        }).catch((error) => {
          console.log(error);
        });


      },

      handleMapClick : function(e){
        
        if(this.isStartClick=="1"){

          
          this.$confirm('是否选择点击地址为运输终点?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            
            var vm = this;
                
            this.isStartClick = "0";

            var vm = this;
            if(this.endMarker!=""){
              this.map.remove(this.endMarker);
            }

            if(this.driving!=""){
              this.driving.clear();
            }

            this.map.clearMap();
            this.map.clearMap();

            var lat = e.lnglat.lat;
            var lng = e.lnglat.lng;
            
            vm.form.endingPoint = lng+","+lat;
            
            var startingPoint = vm.form.startingPoint;
            
            var startSplit = startingPoint.split(",");

            //构造路线导航类
            var driving = new AMap.Driving({
                policy: AMap.DrivingPolicy.LEAST_TIME,
                map: vm.map,
                showTraffic:false,
                autoFitView:true,
                extensions:"all",
                panel: "panel"
            }); 

            vm.driving = driving;

            // 根据起终点经纬度规划驾车导航路线
            driving.search(new AMap.LngLat(startSplit[0], startSplit[1]), new AMap.LngLat(lng, lat), function(status, result) {
            
                
              // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                if (status === 'complete') {
                    
                    
                    var routes = result.routes; // 获取路线信息
                    if (routes && routes.length > 0) {
                        var distance = routes[0].distance; // 获取第一条路线的总距离，单位为米
                        var resultValue =  (distance / 1000).toFixed(2);
                        vm.form.transportatDistance = resultValue;

                        var steps = routes[0].steps;

                        if(steps){

                          var totalDistance = 0;

                          for(var i = 0;i<steps.length;i++){

                            var step = steps[i];
                            var distance2 = step.distance;

                            var toll_road = step.toll_road;

                            if(toll_road.includes("高速")){
                              totalDistance = totalDistance+distance2;
                            }

                          }

                          if(totalDistance!=0){
                            var resultValue =  (totalDistance / 1000).toFixed(2);
                            vm.form.highwayMileage = resultValue; 
                          }

                        }

                    } 

                } else {
                    
                }
            });

    
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });          
          });



          this.isStartClick = "0";
          return;

        }else{


          this.$confirm('是否选择点击地址为运输起点?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            
            var vm = this;

            if(this.startMarker!=""){
              this.map.remove(this.startMarker);
            }

            var lat = e.lnglat.lat;
            var lng = e.lnglat.lng;
            
            vm.form.startingPoint = lng+","+lat;
            
            // 添加点
            let marker = new AMap.Marker({
              position: new AMap.LngLat(lng, lat), // 点坐标
              map: vm.map // 指定地图
            });
      
            vm.startMarker = marker;
                      
            // 将点添加到地图 
            marker.setMap(vm.map);

            this.isStartClick = "1";
      
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });          
          });


        }

      },
      handleMapDblClick : function(e){
        
        this.$confirm('是否选择点击地址为运输起点?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            
            var vm = this;

            if(this.startMarker!=""){
              this.map.remove(this.startMarker);
            }

            var lat = e.lnglat.lat;
            var lng = e.lnglat.lng;
            
            vm.form.startingPoint = lng+","+lat;
            
            // 添加点
            let marker = new AMap.Marker({
              position: new AMap.LngLat(lng, lat), // 点坐标
              map: vm.map // 指定地图
            });
      
            vm.startMarker = marker;
                      
            // 将点添加到地图 
            marker.setMap(vm.map);

            this.isStartClick = "1";

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });          
        });

      },


      drivingPolicyChange : function(){

          // AMap.DrivingPolicy.LEAST_TIME 最快捷模式

          // AMap.DrivingPolicy.LEAST_FEE     最经济模式
 
          // AMap.DrivingPolicy.LEAST_DISTANCE 最短距离模式

          this.driving.clear();

          var driving;

          var vm = this;

          if(this.form.drivingPolicyValue=="1"){
              //构造路线导航类
              driving = new AMap.Driving({
                  policy: AMap.DrivingPolicy.LEAST_TIME,
                  map: this.map,
                  showTraffic:false,
                  autoFitView:true,
                  extensions:"all",
                  panel: "panel"
              }); 

          }else if(this.form.drivingPolicyValue=="2"){
              //构造路线导航类
              driving = new AMap.Driving({
                  policy: AMap.DrivingPolicy.LEAST_FEE,
                  map: this.map,
                  showTraffic:false,
                  autoFitView:true,
                  extensions:"all",
                  panel: "panel"
              }); 
          }else if(this.form.drivingPolicyValue=="3"){
              //构造路线导航类
              driving = new AMap.Driving({
                  policy: AMap.DrivingPolicy.LEAST_DISTANCE,
                  map: this.map,
                  showTraffic:false,
                  autoFitView:true,
                  extensions:"all",
                  panel: "panel"
              }); 
          }
          
          this.driving = driving; 

          var startingPoint = this.form.startingPoint;
          var endingPoint = this.form.endingPoint;

          var startSplit = startingPoint.split(",");
          var endSplit = endingPoint.split(",");


          // 根据起终点经纬度规划驾车导航路线
          driving.search(new AMap.LngLat(startSplit[0], startSplit[1]), new AMap.LngLat(endSplit[0], endSplit[1]), function(status, result) {
          
         
            // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
              if (status === 'complete') {
                  
                  var routes = result.routes; // 获取路线信息
                  if (routes && routes.length > 0) {
                    
                      var distance = routes[0].distance; // 获取第一条路线的总距离，单位为米
                      var resultValue =  (distance / 1000).toFixed(2);
                    
                      vm.form.transportatDistance = resultValue; 

                      var steps = routes[0].steps;

                      if(steps){

                        var totalDistance = 0;

                        for(var i = 0;i<steps.length;i++){

                          var step = steps[i];
                          var distance2 = step.distance;

                          var toll_road = step.toll_road;

                          if(toll_road.includes("高速")){
                            totalDistance = totalDistance+distance2;
                          }

                        }

                        if(totalDistance!=0){
                          var resultValue =  (totalDistance / 1000).toFixed(2);
                           
                          vm.form.highwayMileage = resultValue; 
                        }else{
                          vm.form.highwayMileage = "0"; 
                        }

                      }

                  } 

              } else {
                  
              }
          });



      },

      savePageData : function(){
 
        var vm = this;
        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/savePageData', {
          "pageData": JSON.stringify(this.form),
          "tableName":"ht_transportation_route"
        }).then((res) => {

          if (res.data.flag) {
            vm.form.id = res.data.id;
            this.$message({
              type: 'success',
              message: res.data.message
            });

          } else {
            this.$message.error(res.data.message);
          }
        });

      },

      onSearch:function(){

        var vm = this;
        if(this.startMarker!=""){
          this.map.remove(this.startMarker);
        }

        AMapLoader.load({
            key:"3c40b24a0968cfbc241dce18366a6553", // key
            version:"2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:['AMap.DistrictSearch'], // 需要使用的的插件列表
        }).then((AMap) => {

            const district = new AMap.DistrictSearch({subdistrict:0,extensions:'all',level:'province'});
            district.search(this.form.startingCity,function(status, result){
                // 查询成功时，result即为对应的行政区信息
                // console.log(result.districtList[0].boundaries,222) // 这里是整个郑州市的边界经纬度
                const bounds = result.districtList[0].boundaries
                  
                var lat = result.districtList[0].center.lat;
                var lng = result.districtList[0].center.lng;
               
                vm.form.startingPoint = lng+","+lat;
               
                // 添加点
                let marker = new AMap.Marker({
                  position: new AMap.LngLat(lng, lat), // 点坐标
                  map: vm.map // 指定地图
                });
          
                vm.startMarker = marker;
                          
                // 将点添加到地图 
                marker.setMap(vm.map);
              
                this.isStartClick = "1";
            })
        }).catch(e=>{
            console.log(e);
        }) 

      },
      
      pathPlanning : function(){

        this.isStartClick = "0";

        var vm = this;
        if(this.endMarker!=""){
          this.map.remove(this.endMarker);
        }

        if(this.driving!=""){
          this.driving.clear();
        }

        this.map.clearMap();
        this.map.clearMap();
        
        // level (string) 关键字对应的行政区级别或商圈，可选值： country：国家 province：省/直辖市 city：市 district：区/县 biz_area：商圈
        // subdistrict (number) 显示下级行政区级数（行政区级别包括：国家、省/直辖市、市、区/县4个级别），商圈为区/县下一 级，可选值：0、1、2、3，默认值：1 0：不返回下级行政区 1：返回下一级行政区 2：返回下两级行政区 3：返回下三级行政区
        // extensions (string) 是否返回行政区边界坐标点，默认值：base，不返回行政区边界坐标点，取值：all，返回完整行政区边界坐标点
        const district = new AMap.DistrictSearch({subdistrict:0,extensions:'all',level:'province'});
        district.search(this.form.endingCity,function(status, result){
            // 查询成功时，result即为对应的行政区信息
            // console.log(result.districtList[0].boundaries,222) // 这里是整个郑州市的边界经纬度
            const bounds = result.districtList[0].boundaries;
            
              
            var lat = result.districtList[0].center.lat;
            var lng = result.districtList[0].center.lng;
            
            vm.form.endingPoint = lng+","+lat;
            
            var startingPoint = vm.form.startingPoint;
            
            var startSplit = startingPoint.split(",");

            //构造路线导航类
            var driving = new AMap.Driving({
                policy: AMap.DrivingPolicy.LEAST_TIME,
                map: vm.map,
                showTraffic:false,
                autoFitView:true,
                extensions:"all",
                panel: "panel"
            }); 

            vm.driving = driving;

            // 根据起终点经纬度规划驾车导航路线
            driving.search(new AMap.LngLat(startSplit[0], startSplit[1]), new AMap.LngLat(lng, lat), function(status, result) {
            
                
              // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                if (status === 'complete') {
                    
                    
                    var routes = result.routes; // 获取路线信息
                    if (routes && routes.length > 0) {
                        var distance = routes[0].distance; // 获取第一条路线的总距离，单位为米
                        var resultValue =  (distance / 1000).toFixed(2);
                        vm.form.transportatDistance = resultValue;

                        var steps = routes[0].steps;

                        if(steps){

                          var totalDistance = 0;

                          for(var i = 0;i<steps.length;i++){

                            var step = steps[i];
                            var distance2 = step.distance;

                            var toll_road = step.toll_road;

                            if(toll_road.includes("高速")){
                              totalDistance = totalDistance+distance2;
                            }

                          }

                          if(totalDistance!=0){
                            var resultValue =  (totalDistance / 1000).toFixed(2);
                            vm.form.highwayMileage = resultValue; 
                          }

                        }

                    } 

                } else {
                    
                }
            });
            
          })

      },



      // 选择省
      changeStartProvince(val) {
        
        this.startProvinceList.forEach((province, index) => {
          if (val.toString() === this.startProvinceList[index].value) {
            this.startCityOptions = this.startProvinceList[index].children
          
            this.originOptions = this.startProvinceList[index].children[0].children
         
            this.valueOrigin = ''
           
            this.valueOrigin = this.startProvinceList[index].children[0].children[0].value
          }
        })
      },
      changeEndProvince(val) {
        
        this.endProvinceList.forEach((province, index) => {
          if (val.toString() === this.endProvinceList[index].value) {
            this.endCityOptions = this.endProvinceList[index].children
          
            this.originOptions = this.endProvinceList[index].children[0].children
         
            this.valueOrigin = ''
           
            this.valueOrigin = this.endProvinceList[index].children[0].children[0].value
          }
        })
      },
      // 选择市
      changeStartCity(val) {
        ;
        this.startCityList.forEach((city, index) => {
      
          if (val.toString() === this.startCityList[index].value) {
            this.originOptions = this.startCityList[index].children
            this.valueOrigin = ''
            //如果选中市之后默认区选中
            // this.valueOrigin = this.cityList[index].children[0].value
          }
        })
      },
      changeEndCity(val) {
        ;
        this.endCityList.forEach((city, index) => {
      
          if (val.toString() === this.endCityList[index].value) {
            this.originOptions = this.endCityList[index].children
            this.valueOrigin = ''
            //如果选中市之后默认区选中
            // this.valueOrigin = this.cityList[index].children[0].value
          }
        })
      },
      // 选择区
      changeOrigin(val) {
        this.valueOrigin = val
      },
      // 初始化省市区数据
      _getJsonData() {
          console.log('res =======>'+jsonData)
          this.startProvinceList = []
          this.endProvinceList = []

          this.startCityList = []
          this.endCityList = []

          this.originList = []
          jsonData.forEach((item) => {
            if (item.value.match(/0000$/)) {
              this.startProvinceList.push({
                value: item.value,
                label: item.name,
                children: []
              })
              this.endProvinceList.push({
                value: item.value,
                label: item.name,
                children: []
              })
            } else if (item.value.match(/00$/)) {
              this.startCityList.push({
                value: item.value,
                label: item.name,
                children: []
              })
              this.endCityList.push({
                value: item.value,
                label: item.name,
                children: []
              })
            } else {
              this.originList.push({
                value: item.value,
                label: item.name
              })
            }
          })
          for (let index in this.startProvinceList) {
            for (let index1 in this.startCityList) {
              if (this.startProvinceList[index].value.slice(0, 2) === this.startCityList[index1].value.slice(0, 2)) {
                this.startProvinceList[index].children.push(this.startCityList[index1])
              }
            }
          }
          for (let index in this.endProvinceList) {
            for (let index1 in this.endCityList) {
              if (this.endProvinceList[index].value.slice(0, 2) === this.endCityList[index1].value.slice(0, 2)) {
                this.endProvinceList[index].children.push(this.endCityList[index1])
              }
            }
          }
          for(let item1 in this.startCityList) {
            for(let item2 in this.originList) {
              if (this.originList[item2].value.slice(0, 4) === this.startCityList[item1].value.slice(0, 4)) {
                this.startCityList[item1].children.push(this.originList[item2])
              }
            }
          }
          for(let item1 in this.endCityList) {
            for(let item2 in this.originList) {
              if (this.originList[item2].value.slice(0, 4) === this.endCityList[item1].value.slice(0, 4)) {
                this.endCityList[item1].children.push(this.originList[item2])
              }
            }
          }
      },

      buttonClick : function(type,divId){
        for(var i = 1;i<=6;i++){
          $("#hpDiv"+i).css("background","#1f2c6c3b");
        }
        $("#"+divId).css("background","#409EFF");
        this.activeDate = new Date().getTime();
        //路由跳转
        //this.$router.push('/'+type)
      }, 
      
      mapReady({ BMap, map }) {
        let self=this;
        // 选择一个经纬度作为中心点
        this.point = new BMap.Point(117.130,36.632);
        map.centerAndZoom(this.point, 7);
        //滚轮
        map.enableScrollWheelZoom(true);
        //单击事件
        map.addEventListener('click', function (e) {
          //绑定回经纬度框
          self.formData.longitude_latitude = e.point.lng + ',' + e.point.lat;
          /*alert('点击位置经纬度：' + e.point.lng +','+ e.point.lat);*/
        });
      },
      //根据地址搜索
      selectmap(address){
        this.$http.get("/iepsapi/getAddr?address="+address).then((res) => {
          if(res.data.flag){
            this.$message({
              type:'success',
              message:res.data.message
            });
            //进行回显
            this.formData.longitude_latitude= res.data.data;
          }else{
            this.$message.error(res.data.message);
          }
        })
      },
    }
  }
</script>



<style>
  .el-form-item {
      margin-bottom: 5px;
  }
  .el-form-item__label {
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      color: #f2f2f2;
      line-height: 40px;
      padding: 0 1px 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  .el-input__inner { 
      background-color: #202b6180;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #5c7bc5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #a3aec5;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
  }

  .el-input-group__append, .el-input-group__prepend {
    background-color: #305997;
    color: #ffffff;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #506aa7;
    border-radius: 4px;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap;
  }
</style>


<style scoped> 

  /deep/ .el-radio {
      color: #ffffff;
      cursor: pointer;
      margin-right: 30px;
  }

  /deep/ .el-dialog__body {
      padding: 0px 0px;
      color: #606266;
      font-size: 14px;
      word-break: break-all;
      background: #29377C;
  }

  /deep/ .el-dialog__title {
    line-height: 15px;
    font-size: 16px;
    color: #FFF;
  }


  /deep/ .el-dialog__header {
    padding: 20px 20px 10px;
    color: #FFF;
    background: #374590;
  }

  /deep/ .el-dialog__footer {
    padding: 10px 20px 20px;
    text-align: right;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #29377C;
}

  /* 设定地图的大小 */
  .mapDiv{
    width: 98%;
    height: 45vh;
    margin: 1vh auto;
  }

  .buttonStyle {
    height: 4vh;
    width: 24vh;
    display: inline-block;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    cursor: pointer;
    border-radius: 10px;
    font-family: Arial;
    border: none;
    color: #ffffff;
    font-size: 1.6vh;
    background: #1f2c6c3b;
    border-bottom: 1px solid rgb(64, 158, 255);
    margin: 1.5vh 10px;
    text-align: center;
    line-height: 4vh;
    vertical-align: middle;
    text-decoration: none;
  }

  .box{ 
    width: 99%;
    height: 7vh;
    margin: 0 auto;
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
    border-radius: 5px;
  }

  .box1{
    width: 97%;
    left: 2.6vh;
    height: 7vh;
    position: absolute;
    top: 65vh;
    margin: 0 auto;
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
    border-radius: 5px;
  }

  .titleCss{
    font-size: 22px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: #f2f2f2;
  }
</style>
